<template>
	<view class="container">
		<view class="headerNav">
			<u-navbar :title="data.utype == 1 ?  '我的下载':'投递'"></u-navbar>
			<u-dropdown v-if="data.utype == 2">
				<u-dropdown-item @change="getoption(0,$event)" v-model="data.value1" :title="data.title"
					:options="data.options1"></u-dropdown-item>
				<u-dropdown-item @change="getoption(1,$event)" v-model="data.value2" :title="data.title2"
					:options="data.options2"></u-dropdown-item>
			</u-dropdown>
		</view>
		<z-paging :fixed="false" :height="data.height" ref="paging" v-model="dataList" @query="getSystemInfoSync"
			created-reload :auto-scroll-to-top-when-reload="false" :refresher-enabled="true">
			<view v-if="data.utype == 1">
				<view class="container_ls" v-for="item in dataList" :key="item.id" @click="handleToReusme(item)">
					<view class="u-flex u-row-between">
						<view class="u-flex">
							<u-avatar :src="item.photo_img_src"></u-avatar>
							<view class="u-m-l-28">
								<view class="u-font-32 u-font-weight">{{item.fullname}}</view>
								<view class="u-m-t-16" style="color: #867F7F ;">
									{{`${item.experience_text} | ${item.education_text} | ${item.intention_wage}`}}
								</view>
							</view>
						</view>
						<view class="u-m-b-10 u-font-12" style="color: #867F7F ;">
							{{$u.timeFormat(item.addtime)}}
						</view>
					</view>
					<view class="u-p-l-30 u-p-r-30">
						<!-- 工作履历 -->
						<view class="u-flex u-m-t-32">
							<u-image src="/pages/pagesPersonal/static/experience.png" :width="40" :height="40"
								mode="widthFix"></u-image>
							<view class="u-m-l-16 u-white-80">
								{{`${item.companyname} · ${item.recent_work}`}}
							</view>
						</view>
						<!-- 求职意向职位 -->
						<view class="u-m-t-32 u-flex u-flex-wrap">
							<u-tag class="u-m-r-20 u-m-b-20" v-for="(tag,index) in item.intention_jobs.split(',')"
								:key="index" :text="tag" mode="dark" type="info" bg-color="#F2F2F2"
								color="#867F7F"></u-tag>
						</view>
						<!-- 备注 -->
						<view v-if="item.remark" class="u-m-t-24" style="color:#867F7F">
							{{item.remark}}
						</view>

						<view class="u-flex u-row-right u-m-t-28">
							<view class="container_ls_tag" @click.stop="handlerRemark(item)">
								备注
							</view>
							<view class="container_ls_tag" @click.stop="handlerAgree(item)">
								面试邀请
							</view>
						</view>
					</view>

				</view>
			</view>
			<view v-if="data.utype == 2">
				<view class="newsList" v-for="item in dataList" :key="item.id" @tap="tojob(item.jobid)">
					<view class="newsTop">
						<text>{{item.jobname}}</text>
						<text>{{item.wage_text}}</text>
					</view>
					<view class="brief">
						<text>{{item.education_text}}·{{item.experience_text}}·{{item.district_text}}</text>
						<view class="briefright">
							<view class="comname" style="display: flex;align-items: center;">
								<text>{{item.companyname}}</text>
								<image src="/pages/pagesPersonal/static/personal/authentication.png"></image>
							</view>
							<text>{{item.status_text}}</text>
						</view>
					</view>
					<view class="more">
						<view class="moreleft">
							<image src="/pages/pagesPersonal/static/personal/footprint.png" mode=""></image>
							<text>{{item.click}}热度</text>
						</view>

						<text class="moreright">{{getMyDate(item.addtime*1000)}}申请</text>
					</view>
				</view>
			</view>
		</z-paging>
		<!-- 备注弹框 -->
		<u-modal v-model="data.isRemark" title="备注" show-cancel-button @cancel="data.isRemark = false"
			@confirm="handlerRemarkConfirm">
			<template v-slot:default>
				<view class="u-p-30">
					<u-input type="textarea" maxlength="50" v-model="data.remark" placeholder="请输入备注内容"
						border></u-input>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const data = reactive({
		utype: uni.getStorageSync('utype'),
		height: "",
		value1: 0,
		value2: 0,
		settrId: 0,
		options1: [{
				label: '不限',
				value: 0,
			},
			{
				label: 'hr未查看',
				value: 1,
			},
			{
				label: 'hr已查看',
				value: 2,
			},
			{
				label: '同意面试',
				value: 3,
			},
			{
				label: '已被婉拒',
				value: 4,
			},
			{
				label: '停止招聘',
				value: 5,
			}

		],
		options2: [{
				label: '不限',
				value: 0,
			},
			{
				label: '3天内',
				value: 1,
			},
			{
				label: '7天内',
				value: 2,
			},
			{
				label: '15天内',
				value: 3,
			},
			{
				label: '30天内',
				value: 4,
			}
		],
		title: "投递反馈",
		title2: "投递时间",
		// 备注
		isRemark: false,
		remark: '',
	})
	// 获取职位列表数据
	const paging = ref(null)
	let dataList = ref([])
	const getoption = (id, value) => {
		if (id == 0) {
			data.title = data.options1[value].label
		} else {
			data.title2 = data.options2[value].label
			if (value == 0) {
				data.settrId = 0
			} else if (value == 1) {
				data.settrId = 3
			} else if (value == 2) {
				data.settrId = 7
			} else if (value == 3) {
				data.settrId = 15
			} else if (value == 4) {
				data.settrId = 30
			}
		}
		paging.value.reload()
	}

	const getSystemInfoSync = async (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			pagesize: pageSize,
			status: data.value1,
			settr: data.settrId
		}

		let res
		if (data.utype == 1) {
			res = await uni.$u.api.company_downresume_list({
				params
			})
		} else {
			res = await uni.$u.api.job_apply({
				params
			})
		}
		paging.value.complete(res.items)
	}
	// 面试邀请
	const handlerAgree = (item) => {
		if (item.audit != 1) return uni.$u.toast('该简历尚未通过审核，不能继续此操作')
		uni.$u.route('/pages/pagesHome/detailPages/invitation', {
			fullname: item.fullname,
			resumeid: item.resume_id
		})
	}
	// 备注
	const handlerRemark = (item) => {
		data.item = item
		data.isRemark = true
	}
	const handlerRemarkConfirm = async () => {
		if (uni.$u.test.isEmpty(data.remark)) {
			uni.$u.toast('请输入备注内容')
			data.isRemark = true
			return
		}
		let parmas = {
			remark: data.remark,
			resume_id: data.item.resume_id
		}
		let res = await uni.$u.api.remark_resume(parmas)
		data.remark = ''
		uni.$u.toast('备注成功')
		paging.value.reload()
	}
	// 去简历详情页
	const handleToReusme = async (item) => {
		uni.$u.route('/pages/pagesHome/detailPages/resume', {
			id: item.resume_id,
			jobid: item.jobid,
			jobname: item.jobname
		})
	}
	// 获取列表展示高度
	const getListHeight = async () => {
		let res = await uni.$u.getRect('.headerNav');
		data.height = (uni.$u.sys().windowHeight - res.height) + 'px';
	}
	const tojob = (id) => {
		uni.$u.route('pages/pagesHome/detailPages/job', {
			id
		})
	}

	function getMyDate(str) {
		var oDate = new Date(str),
			oYear = oDate.getFullYear(),
			oMonth = oDate.getMonth() + 1,
			oDay = oDate.getDate(),
			oHour = oDate.getHours(),
			oMin = oDate.getMinutes(),
			oSen = oDate.getSeconds(),
			oTime = oYear + '-' + addZero(oMonth) + '-' + addZero(oDay) + ' ' + addZero(oHour) + ':' +
			addZero(oMin) + ':' + addZero(oSen);
		return oTime;
	}
	//补零操作
	function addZero(num) {
		if (parseInt(num) < 10) {
			num = '0' + num;
		}
		return num;
	}
	onReady(() => {
		getListHeight()
	})
</script>

<style lang="scss">
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #f8f8f8;
	}

	.container {
		&_ls {
			background-color: #fff;
			margin-bottom: 10rpx;
			padding: 32rpx;
			font-size: 26rpx;
			color: #101010;
			&_tag {
				background-color: rgba(255, 255, 255, 1);
				text-align: center;
				border: 2rpx solid rgba(187, 187, 187, 1);
				margin-left: 18rpx;
				padding: 12rpx 26rpx;
			}
		}
	}

	.newsList {
		padding: 30rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 6rpx;
		margin-bottom: 20rpx;
		margin-top: 20rpx;

		.newsTop {
			font-weight: bold;
			font-size: 32rpx;
			font-family: Arial;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text:nth-child(1) {
				width: 50%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			text:nth-child(2) {
				font-size: 24rpx;
				color: #00D075;
				font-weight: normal;
			}
		}

		.brief {
			font-size: 26rpx;
			font-family: Arial;
			color: #867F7F;
			margin: 20rpx 0;
			display: flex;
			flex-direction: column;

			.briefright {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10rpx 0;

				.comname {
					text {
						max-width: 450rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

				}

				image {
					width: 70rpx;
					height: 28rpx;
					margin-left: 10rpx;
				}
			}
		}

		.more {
			color: #867F7F;
			font-size: 24rpx;
			font-family: Arial;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1rpx solid #ccc;
			padding-top: 20rpx;

			.moreleft {
				display: flex;

				// align-items: center;
				image {
					width: 24rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}

			.moreright {
				color: #000;
			}

		}
	}


	:deep .u-dropdown {
		box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.4) !important;
		background-color: #fff;
		border-bottom: 1rpx solid #ccc;
	}
</style>